<?php

include 'data.php';
include 'head.php';
?>
<table>
    <tbody>
        <tr>
            <td><img id="PhucSinh" src="3.jpg" /></td>
        </tr>
        <tr>
            <td><img id="TiecLy" src="1.jpg" /></td>
        </tr>
        <tr>
            <td><img id="ChuaChienLanh" src="2.jpg" /></td>
        </tr>
        <tr><td><p class="counter"></p></td>
        </tr>
    </tbody>
</table>

<audio id="ticking" src="../ticking-clock.mp3" loop="loop"></audio>
<audio id="end-time" src="../end-time.wav" ></audio>
<audio id="show-result" src="../show-result.wav" ></audio>
<div class="button">
    <input id="10-minutes" type="button" value="10 minute" />
    <input id="bttplay" type="button" value="Start" />
    <input id="bttstop" type="button" value="Stop" />
    <input id="result-1" type="button" value="Result 1" />
    <input id="result-2" type="button" value="Result 2" />
    <input id="result-3" type="button" value="Result 3" />
</div>
<div id="timer">

</div>
<script type="text/javascript">
    $(function() {
        /*
         * Init Values
         */
        var $timer;
        var _second = 1;
        var _counter = _second;
        var _image_time = 2 * 60; //second
        var _join_time = 2 * 60; //second

        $sound_effect = {
            play: function() {
                $sound_effect.pause();
                $sound_effect.show_timer();
            },
            pause: function() {
                $sound_effect.stop_timer();
                $('audio#ticking').get(0).pause();
                $('audio#ticking').get(0).currentTime = 0;
            },
            end_time: function() {
                $sound_effect.pause();
                $('audio#end-time').get(0).play();
            },
            show_result: function() {
                $sound_effect.pause();
                $('audio#show-result').get(0).play();
            },
            show_timer: function() {
                if ($timer === undefined) {
                    $sound_effect.stop_timer();
                }
                $timer = setInterval($sound_effect.count_time, 100);
            },
            count_time: function() {
                _counter = _counter - 1;
                $('p.counter').text($sound_effect.generate_time(_counter));
                if (_counter <= 0) {
                    $sound_effect.end_time();
                }
            },
            generate_time: function(time) {
                var minutes = Math.floor(time / 60);
                var seconds = time - minutes * 60;
                if (seconds < 10) {
                    seconds = '0' + seconds;
                }

                var _minute_second = minutes + ' : ' + seconds;
                return _minute_second;
            },
            stop_timer: function() {
                _counter = _second;
                clearInterval($timer);
            }
        }

        $("#10-minutes").click(function() {
            $('img').hide();
            _second = _join_time;
            $('p.counter').stop().css({
                'color': 'red',
                'padding-top': '300px',
                'font-size': '200px'
            }).text($sound_effect.generate_time(_second));
        });

        $("#bttplay").click(function() {
            if (_second == _image_time) {
                $('p.counter').animate({
                    color: 'red',
                    'font-size': '120px'
                }, 1000 * _image_time);
            }
            
            $sound_effect.play();

            if (_second == _image_time) {
            }
            else {
                $('audio#ticking').get(0).play();
            }
        });

        $("#bttstop").click(function() {
            $sound_effect.end_time();
        });

        $("input:button[id^='result']").click(function() {
            _btt_attr = $(this).attr('id');
            _second = _image_time;
            $sound_effect.show_result();

            $('img').hide();

            $('p.counter').stop().css({
                'padding-top': '10px',
                'font-size': '70px',
                'color': 'rgb(182, 184, 240)'
            }).text($sound_effect.generate_time(_second));

            switch (_btt_attr) {
                case 'result-1':
                    $('#TiecLy').fadeIn();
                    break;
                case 'result-2':
                    $('#ChuaChienLanh').fadeIn();
                    break;
                case 'result-3':
                    $('#PhucSinh').fadeIn();
                    break;
            }
        });
    });
</script>
<?php

include 'tail.php';
?>